<!-- 合计 计算 -->
<template>
  <div class="box">
      <div>
            <checkbuttom id="buttom" :is-checked="isSelectAll"></checkbuttom>
            <span class="quan">全选</span>
      </div>
      <div>
            <span>合计:</span>
            <span>{{showlength}}</span>
      </div>
       <div>
            <span>去结算:</span>
            <span></span>
      </div>
  </div>
</template>

<script>
import checkbuttom from "components/content/checkbuttom.vue"
export default {
  name:"sum",
  components: {
       checkbuttom
  },
  data () {
      return {
           isred:false
      }
  },
  computed: {
           isSelectAll() {
                    if(this.$store.state.shopcar.length ===0)  return false
                    
                    return  ! this.$store.state.shopcar.find(item=> !item.checked)
                    // var  item = this.$store.state.shopcar.filter(item=>{
                    //           return   item.checked==false
                    // })
                    //     if(item.length){
                    //         console.log(item.length)
                    //           return  false
                    //     }else{
                    //         return   true
                    //     }
                    // },
           },
       showlength(){  
                               var sum=0
                        var item = this.$store.state.shopcar.filter(item => {
                            return item.checked==true
                          })
                          item.forEach(function(item,index){
                            sum+= parseInt(item.price.split("¥")[1])*item.count
                          })
                          console.log(sum)
                           return  sum
                    }
                   
       },
    //    sumRmb(){

    //    }
        //全选按钮


}

</script>

<style scoped>

.box{
     background: #f6f6f6;
     position: fixed;
     bottom: 49px;
     left: 0;
     right: 0;
     height: 35px;
     display: flex;
     line-height: 35px;
}
.box>div:nth-child(1){
     flex: 1;
     display: flex;
}
.box>div:nth-child(2){
    flex: 1;
}
.box>div:nth-child(3){
    flex: 1;
}
 #buttom {
     height: 23px;
     width: 25px;
     margin-top: 5px;
     margin-left: 15px;
     line-height: 0;
  }
  .quan{
      text-align: center;
  }
  .red{
       background: red;
  }
</style>